<template>
  <div class="header_cell">
    <!-- 目标专利 -->
    <template v-if="data.target">
      <slot name="target" :data="data"></slot>
    </template>
    <!-- 对比专利 -->
    <template v-else-if="data.contrast">
      <div class="cell_left">
        <span>{{ data.left.label }}</span>
        <span>{{ data.left.pnNumber }}</span>
        <i class="el-icon-edit"></i>
      </div>
      <div class="cell_right">
        <span>{{ data.right.label }}:</span
        ><span>{{ data.right.pnNumber }}</span>
      </div>
    </template>
    <!-- 新增专利 -->
    <template v-else-if="data.new">
      <div class="cell_left">
        <span>{{ data.left.label }}</span>
        输入框
      </div>
    </template>
    <!-- 其他 -->
    <template v-else>
      {{ data.label }}
    </template>
  </div>
</template>

<script>
export default {
  props: ["data"],
};
</script>
<style scoped lang="less">
.header_cell {
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  font-weight: 600;
  font-size: 12px;
  color: #626262;
  line-height: 20px;
}
.cell_left {
  span:nth-of-type(1) {
    margin-right: 8px;
    color: #a3a3a3;
  }
  span:nth-of-type(2) {
    color: #181818;
  }
  i {
    margin-left: 8px;
  }
}
.cell_right {
  font-weight: 500;
  span:nth-of-type(1) {
    margin-right: 8px;
    color: #a3a3a3;
  }
  span:nth-of-type(2) {
    color: #181818;
  }
}
</style>
